<template>
  <div class="box">
    <div class="divForm">
      <el-form label-position="left">
        <el-row>
          <el-col :span="8">
            <el-form-item label="车型编号:" prop="">
              <el-input v-model="form.id" size="mini" class="inputW" />
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="应载重量:" prop="">
              <el-select v-model="form.allowableLoad" size="mini" class="inputW">
                <el-option
                  v-for="item in loadArrry"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="应载体积:" prop="">
              <el-select v-model="form.allowableVolume" size="mini" class="inputW">
                <el-option
                  v-for="item in volumeArray"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value"
                />
              </el-select>

            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="8">
            <el-form-item label="车辆类型:" prop="">
              <el-input v-model="form.name" size="mini" class="inputW" />
            </el-form-item>
          </el-col>

          <el-col>
            <el-form-item :span="8">
              <el-button type="primary" @click="getQueryList">搜索</el-button>
              <el-button @click="resetForm">重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="divTable">
      <el-button type="primary" style="margin-bottom: 20px;" @click="showAddDialog(null,'新增车型')">新增车型</el-button>
      <el-table :header-cell-style="{background: '#f4f6f8'}" :data="list">
        <el-table-column

          prop="staffPhoto"
          align="center"
          label="序号"
          type="index"
          :index="indexMethod"
        />
        <el-table-column prop="id" label="车型编号" width="200px" />
        <el-table-column prop="name" label="车辆类型" width="150px" />
        <el-table-column prop="num" label="车辆数量" />
        <el-table-column prop="allowableLoad" label="应载重量(吨)" width="100px" />
        <el-table-column prop="allowableVolume" label="应载体积(立方米)" width="200px" />
        <el-table-column prop="measureLong" label="长(米)" />
        <el-table-column prop="measureWidth" label="宽(米)" />
        <el-table-column prop="measureWidth" label="高(米)" />
        <!-- 操作 -->
        <el-table-column label="操作" width="150px">
          <template v-slot="{ row }">
            <el-button size="mini" type="text" @click="showAddDialog(row.id,'编辑车型')">编辑</el-button>
            <el-popconfirm title="确认删除该行数据吗？">
              <el-button slot="reference" style="margin-left:10px" size="mini" type="text">删除</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-row style="height: 60px" align="middle" type="flex" justify="end">
        <el-pagination
          :current-page="queryParams.page"
          :page-sizes="[5,10, 20, 30]"
          :page-size="queryParams.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="list.length"
        />
        <!-- @size-change="handleSizeChange"
          @current-change="handleCurrentChange" -->
      </el-row>
    </div>
    <AddCarType v-if="showDialog" :eadt-id="eadtId" :title="title" :show-dialog.sync="showDialog" @updateCarType="getPapeList" />
  </div>

</template>

<script>
import { delCarType, getPagecarTypeList } from '../api/carType'
import AddCarType from './components/add-carType.vue'

export default {
  components: {
    AddCarType
  },
  data() {
    return {
      eadtId: null,
      title: '',
      showDialog: false,
      list: [],
      queryParams: {
        page: 1,
        pageSize: 10
      },
      total: null,
      form: {
        allowableLoad: null,
        allowableVolume: null,
        id: null,
        name: ''
      },
      loadArrry: [
        {
          value: 'RANGE_LEVEL_1',
          name: '<1.8（吨）'
        },
        {
          value: 'RANGE_LEVEL_2',
          name: '1.8-6（吨）'
        },
        {
          value: 'RANGE_LEVEL_3',
          name: '6-14（吨）'
        },
        {
          value: 'RANGE_LEVEL_4',
          name: '14-30（吨）'
        },
        {
          value: 'RANGE_LEVEL_5',
          name: '30-50（吨）'
        },
        {
          value: 'RANGE_LEVEL_6',
          name: '50-100（吨）'
        },
        {
          value: 'RANGE_LEVEL_7',
          name: '100>（吨）'
        }
      ],
      volumeArray: [
        {
          value: 'RANGE_LEVEL_1',
          name: '<3（m³）'
        },
        {
          value: 'RANGE_LEVEL_2',
          name: '3-5（m³）'
        },
        {
          value: 'RANGE_LEVEL_3',
          name: '5-10（m³）'
        },
        {
          value: 'RANGE_LEVEL_4',
          name: '10-15（m³）'
        },
        {
          value: 'RANGE_LEVEL_5',
          name: '15-30（m³）'
        },
        {
          value: 'RANGE_LEVEL_6',
          name: '30-50（m³）'
        },
        {
          value: 'RANGE_LEVEL_7',
          name: '50-80（m³）'
        },
        {
          value: 'RANGE_LEVEL_8',
          name: '80-150（m³）'
        },
        {
          value: 'RANGE_LEVEL_9',
          name: '150>（m³）'
        }
      ]
    }
  },
  created() {
    // this.getcarTypeList()
    this.getPapeList()
  },

  methods: {
    submitForm() {},
    resetForm() {
      this.getPapeList()
      // this.$refs.form.resetFields()
      this.form.allowableLoad = ''
      this.form.allowableVolume = ''
      this.form.name = ''
      this.form.id = ''
    },

    // 获取分页列表
    async getPapeList() {
      const res = await getPagecarTypeList(this.queryParams)
      console.log(res)
      this.list = res.data.items
    },
    // 模糊查询
    async getQueryList() {
      // const id = Number(this.form.id)
      // const allowableLoad = Number(this.form.allowableLoad)
      // const allowableVolume = Number(this.form.allowableVolume)

      const res = await getPagecarTypeList({

        // allowableLoad: allowableLoad,
        // allowableVolume: allowableVolume,
        // id: id,
        // name: this.form.name,
        ...this.form,
        ...this.queryParams })
      // console.log(res);

      this.list = res.data.items
    },
    // 表格序号
    indexMethod(index) {
      return index + 1
    },
    // 显示弹框
    showAddDialog(id, type) {
      this.title = type
      this.eadtId = id
      this.showDialog = true
    },
    // 删除
    async confirmDel(id) {
      // console.log(Number(id))
      await delCarType(Number(id))

      this.getPapeList()
      this.$message.success('删除车型列表成功')
    }
  }

}
</script>

<style lang="scss" scoped>
.box{
  background-color: #f3f4f7;
  padding: 20px;
  .divForm{
    padding: 20px 40px;
    background-color: #fff;
  }
  .divTable{
    margin-top: 20px;
     padding: 30px ;
    background-color: #fff;

  }
}
.inputW{
  width: 290px;
}
</style>
